<template>
  <view class="page">
    <scroll-view class="messageList" scroll-y="true">
      <view class="listWrapper">
        <view v-for="(item , index) in messageList" :key="index">
          <view v-if="item.type === 1" class="sentMessageItem">
            <view class="left">
              <view class="content">
                {{ item.msg }}
              </view>
            </view>
            <view class="right">
              <view class="avatar" :style="'background-image: url(' + item.avatar + ')'"></view>
            </view>
          </view>
          <view class="messageItem" v-else>
            <view class="left">
              <view class="avatar" :style="'background-image: url(' + item.avatar + ')'"></view>
            </view>
            <view class="right">
              <view class="content">
                {{ item.msg }}
              </view>
            </view>
          </view>
        </view>
      </view>

    </scroll-view>
    <view class="bottom">
      <input class="input" @confirm="sendMessage" v-model="message" placeholder="亲,请一句话描述您的问题噢~"/>
    </view>
  </view>
</template>

<script>
import {questToService} from "../../api/user/user";

const DEFAULT_SERVICE_AVATAR_URL = "../../static/test.jpeg";
const RESPONSE = 0;
const QUESTION = 1;
export default {
  created() {
    this.messageList.push({
      avatar: DEFAULT_SERVICE_AVATAR_URL,
      msg: '请问您有什么问题呢~',
      type: RESPONSE
    });
  },
  data() {
    return {
      messageList: [],
      message: '',
    }
  },
  methods: {
    sendMessage() {
      if (this.message.length === 0) {
        wx.showToast({
          title: "消息不能为空!",
          icon: "error",
          duration: 2000,
        });
        return;
      }
      this.messageList.push({
        avatar: this.$store.state.loginUserInfo.avatarUrl,
        msg: this.message,
        type: QUESTION
      });
      questToService(this.message).then(res => {
            this.messageList.push({
              avatar: DEFAULT_SERVICE_AVATAR_URL,
              msg: res.data,
              type: RESPONSE
            });
            this.message = '';
          }
      )
    },
  }
}
</script>

<style lang="scss">
.page {
  height: calc(100% - 150upx);
  background-color: #F4F4F4;

  .messageList {
    height: 100%;
    width: 100%;

    .listWrapper {
      height: 100%;
      width: 100%;
      padding-top: 3%;
      padding-bottom: 5%;

      .messageItem {
        padding: 0 25rpx;
        display: flex;
        margin-bottom: 3%;

        .left {
          width: 15%;

          .avatar {
            background-size: contain;
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
          }
        }

        .right {
          max-width: 70%;
          margin-top: 2%;

          .content {
            text-align: left;
            font-size: 15px;
            border-radius: 20rpx;
            padding: 20rpx;
            background-color: white;
          }
        }
      }

      .sentMessageItem {
        display: flex;
        margin-bottom: 3%;

        .left {
          margin-top: 2%;
          margin-left: auto; /* Adjusted to move to the right */
          max-width: 70%;
          text-align: right; /* Right-align the content */
          .content {
            text-align: left;
            font-size: 15px;
            border-radius: 20rpx;
            padding: 20rpx;
            background-color: white;
          }
        }

        .right {
          width: 15%;
          margin-left: 5%;

          .avatar {
            background-size: contain;
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
          }
        }
      }

    }


  }

  .bottom {
    height: 150upx;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    z-index: 999;
    background-color: rgba(204, 204, 204, 0.34);
    width: 100%;
    padding: 10px 10px;
    box-sizing: border-box;

    .input {
      height: 60upx;
      padding: 10rpx;
      border-radius: 20rpx;
      margin-left: 5%;
      width: 90%;
      background-color: white;
    }
  }
}
</style>
